<template>
  <div class="chartDemo">
    <div id="mainaaaaa"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"

export default {
  data() {
    return {}
  },
  methods: {
    init() {},
  },
  mounted() {
    const hours = ["01/01", "01/02", "01/03", "01/04", "01/05", "01/06", "01/07"]
    const days = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "hhh", "s", "d", "fs"]
    const option = {
      tooltip: {
        position: "top",
      },
      dataZoom: [
        {
          type: "slider",
          yAxisIndex: 0,
          startValue: 0,
          endValue: 4,
          zoomLock: true,
          brushSelect: false,
        },
      ],
      grid: {
        height: "50%",
        top: "10%",
      },
      xAxis: {
        type: "category",
        data: hours,
        splitArea: {
          show: true,
        },
      },
      yAxis: {
        type: "category",
        data: days,
        splitArea: {
          show: true,
        },
      },
      visualMap: {
        min: 1,
        max: 9,
        calculable: true,
        orient: "horizontal",
        type: "piecewise",
        splitNumber: 3,
        left: "center",
        bottom: "15%",
        pieces: [{ max: 4 }, { min: 4, max: 5 }, { min: 5 }],
        formatter: function (value) {
          console.log(value)
          if (value > 5) {
            return "优秀(10-20)"
          } else if (value > 3) {
            return "中等(5-10)"
          } else {
            return "差"
          }
        },
      },
      series: [
        {
          name: "Punch Card",
          type: "heatmap",
          data: [
            ["01/01", "aaa", 3],
            ["01/02", "aaa", 4],
            ["01/03", "aaa", 5],
            ["01/04", "aaa", 6],
            ["01/05", "aaa", 7],
            ["01/06", "aaa", 8],
            ["01/07", "aaa", 9],
            ["01/01", "aaa", 3],
            ["01/02", "bbb", 4],
            ["01/03", "bbb", 5],
            ["01/04", "bbb", 6,5],
            ["01/05", "bbb", 7],
            ["01/06", "bbb", 8],
            ["01/07", "bbb", 9],
            ["01/01", "hhh", 3],
            ["01/02", "hhh", 4],
            ["01/03", "hhh", 5],
            ["01/04", "hhh", 2],
            ["01/05", "hhh", 7],
            ["01/06", "hhh", 1],
            ["01/07", "hhh", 9],
          ],
          label: {
            // show: true
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    }

    var myChart = echarts.init(document.getElementById("mainaaaaa"))
    myChart.setOption(option)
  },
}
</script>

<style>
#mainaaaaa {
  width: 800px;
  height: 500px;
}
</style>
